<template>
  <div class="auth-manage-paeg">

    <el-card shadow="never" class="role-list">
      <p class="title">角色列表 <i class="el-icon-circle-plus-outline" @click="roleVisible = true" /></p>
      <ul class="list">
        <li
          v-for="(item, index) in roleList"
          :key="item.key"
          :class="selectedRole == index && 'active'"
          @click="changeRole(index)"
        >
          {{ item.name }}
          <div class="option">
            <i class="el-icon-edit" @click.stop="roleEdit(item)" />
            <div @click.stop>
              <el-popconfirm
                icon="el-icon-info"
                icon-color="red"
                title="确定删除此角色吗？"
                @onConfirm="roleDel(item)"
              >
                <i slot="reference" class="el-icon-delete" />
              </el-popconfirm>
            </div>

          </div>
        </li>
      </ul>
    </el-card>
    <el-card shadow="never" class="auth-list">
      <div class="title">
        权限列表

        <el-button size="small" type="primary" @click="authSubmit">保存</el-button>
      </div>

      <div class="auth-box">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;" />

        <div class="buttons">
          <el-button @click="getCheckedKeys">通过 key 获取</el-button>
          <el-button @click="setCheckedKeys">通过 key 设置</el-button>
          <el-button @click="getCheckedNodes">通过 none 获取</el-button>
          <el-button @click="resetChecked">清空</el-button>
        </div>

        <el-tree
          ref="tree"
          :data="authOptions"
          show-checkbox
          default-expand-all
          node-key="id"
          highlight-current
          :default-checked-keys="defaultCheckedKeys"
          @check="nodeCheck"
        />

      </div>
    </el-card>

    <el-dialog :title="currentRole ? '编辑': '新建角色'" width="480px" :visible.sync="roleVisible">
      <el-form size="small" :model="roleForm" label-width="100px">
        <el-form-item label="名称">
          <el-input v-model="roleForm.name" placeholder="请输入名称" style="width: 270px" />
        </el-form-item>
        <el-form-item label="角色名">
          <el-input v-model="roleForm.name" placeholder="请输入角色名" style="width: 270px" />
        </el-form-item>
        <el-form-item label="规则">
          <el-input v-model="roleForm.name" type="textarea" :rows="2" placeholder="请输入规则" style="width: 270px" />
        </el-form-item>
        <el-form-item label="额外数据">
          <el-input v-model="roleForm.name" type="textarea" :rows="2" placeholder="请输入额外数据" style="width: 270px" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="roleSubmit">保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: 'AuthManage',
  data() {
    return {
      roleVisible: false,
      roleForm: {
        name: ''
      },
      currentRole: null, // 当前角色
      selectedRole: 0, // 选择的角色
      roleList: [
        { name: '超级管理员', key: 0 },
        { name: '普通管理员', key: 1 },
        { name: '打酱油的', key: 2 },
        { name: '吃干饭的', key: 3 },
        { name: '不干事的', key: 4 },
        { name: '巨能吃的', key: 5 }
      ],
      authOptions: [
        { label: '用户管理', id: 1, children: [
          { label: '增', id: 5, children: [
            { label: 'df', id: 11 },
            { label: 'f', id: 22 },
            { label: 'g', id: 73 },
            { label: 'a', id: 81 }
          ] },
          { label: '删', id: 6 },
          { label: '改', id: 7 },
          { label: '查', id: 8 }
        ] },
        { label: '数据管理', id: 2 },
        { label: '公告管理', id: 3 },
        { label: '价格管理', id: 4 }
      ],
      checkAll: false,
      defaultCheckedKeys: [2, 3],
      isIndeterminate: true
    }
  },
  computed: {
  },
  mounted() {

  },
  methods: {
    getTreeAllKeys(data) {
      const arr = []
      const loop = (array) => {
        if (!array.length) return false
        array.forEach(element => {
          arr.push(element.id)
          if (element.children) {
            loop(element.children)
          }
        })
      }
      loop(data)
      return arr
    },
    // 全选
    handleCheckAllChange(val) {
      this.defaultCheckedKeys = val ? this.getTreeAllKeys(this.authOptions) : []
      this.$refs.tree.setCheckedKeys(this.defaultCheckedKeys)
      this.isIndeterminate = false

      console.log(this.getTreeAllKeys(this.authOptions))
    },
    // 节点点击
    nodeCheck(checkedNodes, otherData) {
      const checkedCount = this.$refs.tree.getCheckedKeys().length
      this.checkAll = checkedCount === this.getTreeAllKeys(this.authOptions).length

      this.isIndeterminate = checkedCount > 0 && checkedCount < this.getTreeAllKeys(this.authOptions).length
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3, 4, 5])
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([])
    },
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes())
    },
    // 添加/修改角色
    roleSubmit() {

    },
    // 选择角色
    changeRole(index) {
      this.selectedRole = index
    },
    // 角色编辑
    roleEdit(item) {
      this.currentRole = item
      this.roleVisible = true
    },
    // 角色删除
    roleDel(item) {
      console.log(item)
    },
    // 权限保存
    authSubmit() {

    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>
<style lang="scss">
// .el-tree-node__children > .el-tree-node{
//   display: inline-block;
// }
</style>
